<template>
    <div>
        <Title></Title>
        <video :src="playVideo[240]" width="100%" height="100%" controls></video>
        <div class="music-comments"  v-for="(item,index) in user" :key="index">
            <div class="picture">
                <img :src="item.user.avatarUrl" alt="" width="100%" height="100%">
            </div>
            <div class="user-comments">
                <span>{{item.user.nickname}}:</span>
                <p>{{item.content}}</p>
            </div>
        </div>
    </div>
</template>

<script>
import {playVideo} from '../api/Music-api'
import {user} from '../api/Music-api'
import Title from "../components/Title.vue";


export default {
    created() {
        playVideo(this.$route.params.id).then(res=>{
            // console.log(res);
            // // eslint-disable-next-line no-debugger
            // debugger;
            this.playVideo = res.data.brs;
        }),
        user(this.$route.params.id).then(res=>{
            this. user = res.hotComments
        })
    },
    components:{
        Title
    },
    data() {
        return {
            playVideo:{},
            user:[]
        }
    },

}
</script>

<style lang="less">
    * {
        margin: 0;
        padding: 0;
    }
    .music-comments {
        width: 100%;
        height: 70px;
        margin-top: 20px;
    }
    .picture {
        width: 19%;
        height: 70px;
        background-color: aqua;
        float: left;
    }
    .user-comments {
        width: 81%;
        height: 70px;
        background-color: aquamarine;
        float: right;
        p {
            margin: 20px 3%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
</style>